Fox 2.0 Router 编程导航-打开append

新增页面-append

fox.router.append(route)

Fox router提供apend方法，可以在同一个fox-router-view打开多个页面的机制，其特点是：

• 以堆栈的方式打开多个页面
• 新打开的页面为激活状态
• 其它页面处于失激活状态
• 关闭堆栈顶部页面后，下一个页面切换到激活状态，并重新恢复状态

其应用场景就是移动端打开新页面的场景

移除页面-remove

fox.router.remove(term)

移除堆栈顶部的激活页面，并把下一个页面切换为激活状态

remove的条件参数说明

• 移除最上层的页面 无参数
• 移除所有append页面 term = {all:true}
• 移除到指定页面 term = {unit: '/ahout'}

remove返回值

该方法方返回一个Promise<boolean>，value为false的时候代表无需要要移除的append页面了

多视图

append方式打开的页面，必须在多视图中，也就是fox-router-view的multi属性设置为true

例子

例子代码：sites/example/pages/program-navigate-append

例子说明：index.vue中fox-router-view设置multi=true，切换到多视图模式，并通过router.append方法把多个页面添加到多视图中

API

• fox.router.open(arg)
• fox.router.remove(arg)

open/remove方法的参数类型有两种:(route)|(path, data, root)

参数A（route路由对象）

fox.router.append(route) fox.router.remove(route)

属性	类型	说明
path	string	路由路径
name	string	路由名称
root	string	装载组件的router-view的名称
params	Object	路由参数
success	Function	页面装载成功后调用方法
error	Function	页面装载失败后调用方法
destroy	Function	页面销毁时调用方法

参数B(参数列表):

fox.router.append(path/name, data, root) fox.router.remove(path/name)

属性	类型	说明
path	string	路由路径
name	string	路由名称
data	Object	路由参数
root	string	装载组件的router-view的名称

index.ts（路由表注册）

import panel from './components/panel.vue'
import home from './components/home.vue'
import panel2 from './components/panel2.vue'
import about from './components/about.vue'

import notFound from '../not-found/index.vue'

// 路由表
let routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: panel,
        children: [
            {
                path: '',
                component: home
            }
        ]
    },
    {
        path: '/about',
        component: panel2,
        children: [
            {
                path: '',
                component: about
            }
        ]
    }
]
export let FoxApp = {
    /** *
     * 安装
     */
    install(fox: any) {
        // 设置404页面
        fox.router.setNotFoundRoute({
            path: '/notFound',
            component: notFound
        })

        // 加入路由
        fox.router.addRoutes(routes)
    }
}

index.vue（路由演示）

<template>
    <div>
        <div>
            <button class="my-button" @click="toHome">append home</button>
            <button class="my-button" @click="toAbout">append about</button>
            <button class="my-button" @click="remove">移除</button>
            <button class="my-button" @click="removeAll">移除所有</button>
            <button class="my-button" @click="removeUnti">移除到about</button>
        </div>
        <div class="my-router-view-div">
            <fox-router-view
                class="fox-views fox-views-window my-views"
                transition-name="fox-view-trans"
                transition="true"
                :multi="true"
                :view-tag="tagProvider"
                :view-tag-props="tagPropsProvider"
            ></fox-router-view>
        </div>
    </div>
</template>
<script>
import { FoxApp } from './index.ts'
import Dialog from './components/dialog.vue'

//top坐标
let top = 30

export default {
    components: {
        'my-dialog': Dialog
    },
    //数据
    data() {
        return {
            tagProvider: (route, index) => {
                console.info('----------- index:' + index)
                if (index == 0) {
                    return 'div'
                } else {
                    return 'my-dialog'
                }
            },
            tagPropsProvider: (route, index) => {
                let props = {
                    top: `${top + 20 * index}px`
                }
                return props
            }
        }
    },
    //创建完成出来
    created() {
        //安装fox app
        FoxApp.install(this.$fox)
    },
    //方法
    methods: {
        //append home页面
        toHome() {
            this.$router.append('/home')
        },
        //apend about页面
        toAbout() {
            this.$router.append('/about')
        },
        //移除最上层页面
        remove() {
            this.$router.remove()
        },
        //移除所有页面
        removeAll() {
            this.$router.remove({ all: true })
        },
        //移除所有页面
        removeUnti() {
            this.$router.remove({ unit: '/ahout' })
        }
    }
}
</script>

<style>
.my-views {
    position: relative;
}
</style>